<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="合租"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div v-show="houselist.length != 0" class="contentbox">
      <div
        v-for="(item, index) in houselist"
        :key="index"
        class="house"
        @click="jumptodetail(item.roomId, item)"
      >
        <img :src="item.image" />
        <div class="intrduce">
          <div class="title1">{{ item.subdistrict }}</div>
          <div class="title2">
            <span>{{ item.rentalWay }}</span
            >|<span>{{ item.houseType }}</span
            >|<span>{{ item.roomAcre }}</span
            >|<span>{{ item.floor }}</span>
          </div>
          <div class="title2">
            <van-icon name="location" size="14px" />{{ item.distance }}
          </div>
          <div class="tips">
            <span>{{ item.rentalWay }}</span>
            <span>{{ item.paymentMethod }}</span>
            <span>{{ item.houseType }}</span>
          </div>
          <div class="title3">{{ item.price }}</div>
        </div>
      </div>
    </div>
    <div v-show="houselist.length == 0 && !heloading" class="nohouse">
      <img src="../../assets/nohouse.png" alt="" />
      <div>啊哦~当前区域暂无房源</div>
    </div>
    <div v-show="heloading" class="nohouse">
      <img src="../../assets/nohouse.png" alt="" />
      <div>加载中...</div>
    </div>
  </div>
</template>

<script>
import { getHouselist } from "@/apis/house.js";
import {
  getHouseList,
  setHouseList,
  getChooseCity,
  getGeolocation,
} from "@/utils/auth";
import { baseUtils } from "@/utils/baseUtils";
export default {
  data() {
    return {
      cityCode: "",
      currentPage: 1,
      perPage: 10,
      houselist: [],
      loading: false,
      heloading: true,
    };
  },
  created() {
    const geolocation = getGeolocation();
    const chooseCity = getChooseCity();
    if (!baseUtils.isEmpty(chooseCity)) {
      this.cityCode = chooseCity.cityCode;
    } else {
      this.cityCode = geolocation.cityCode;
    }
    this.getlist();
  },
  activated() {
    window.addEventListener("scroll", this.showScroll);
  },
  deactivated() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    async getlist() {
      // console.log('code', this.cityCode)
      await getHouselist({
        currentPage: this.currentPage,
        perPage: this.perPage,
        rentalWay: "1",
        citycode: this.cityCode,
      }).then((res) => {
        if (res.code === 200 || res.code === 201) {
          this.heloading = false;
          if (res.result.list.length == 10) {
            this.loading = true;
          }
          this.houselist = res.result.list;
        }
      });
    },
    jumptodetail(e, item) {
      const list = getHouseList();
      for (let i = 0; i < list.length; i++) {
        if (list[i].roomId === item.roomId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseList(list);
      this.$router.push({ path: "/housedetail", query: { roomId: e } });
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        getHouselist({
          currentPage: this.currentPage,
          perPage: this.perPage,
          rentalWay: "1",
          citycode: this.cityCode,
        }).then((res) => {
          if (res.result.list.length !== 10) {
            this.loading = false;
          }
          this.houselist = [...this.houselist, ...res.result.list];
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.contentbox {
  margin: 0 15px;
  .house {
    display: flex;
    margin: 10px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 120px;
      height: 110px;
      min-width: 120px;
      max-width: 120px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 0px 2px;
          color: #45b7cb;
          border: 1px solid #45b7cb;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>
